import React,{Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './loading.less';
const prefix = 'loading';
class Loading extends Component{
    static propTypes = {
        className:PropTypes.string,
        style:PropTypes.object
    }
    render(){
        let props = this.props;
        return(
            <div className={classNames(prefix,props.className)} style={props.style}>
                <div className="blobs">
                    <div className="blob-center"></div>
                    <div className="blob"></div>
                    <div className="blob"></div>
                    <div className="blob"></div>
                    <div className="blob"></div>
                    <div className="blob"></div>
                    <div className="blob"></div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <defs>
                        <filter id="goo">
                            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                            <feBlend in="SourceGraphic" in2="goo" />
                        </filter>
                    </defs>
                </svg>
            </div>
        )
    }
}
export default Loading;